<template>
  <div class="app-container">
    <el-card class="search-card">
      <el-form
        :model="queryParams"
        ref="queryForm"
        size="small"
        :inline="true"
        v-show="showSearch"
        class="formBox"
        label-width="90px"
      >
        <el-form-item label="学院" prop="collegeId">
          <el-select
            v-model="queryParams.collegeId"
            placeholder="请选择学院"
            @change="getCollegeModeListFun"
          >
            <el-option
              v-for="(item, index) in getSchoolCollegeListData"
              :key="index"
              :label="item.collegeName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="模式" prop="modelId">
          <el-select
            v-model="queryParams.modelId"
            placeholder="请选择模式"
            @change="getCollegeMajorListFun"
          >
            <el-option
              v-for="(item, index) in getCollegeModeListData"
              :key="index"
              :label="item.modelName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="专业名称" prop="majorId">
          <el-select v-model="queryParams.majorId" placeholder="请选择专业名称">
            <el-option
              v-for="(item, index) in getCollegeMajorListData"
              :key="index"
              :label="item.majorName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="年级" prop="gradeId">
          <el-select v-model="queryParams.gradeId" placeholder="请选择年级">
            <el-option
              v-for="(item, index) in getSchoolGradeListData"
              :key="index"
              :label="item.grade"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="姓名" prop="studentName">
          <el-input
            placeholder="请输入姓名"
            class="width_100"
            v-model="queryParams.studentName"
          />
        </el-form-item>
        <el-form-item label="身份证号" prop="idNumber">
          <el-input
            placeholder="请输入身份证号"
            class="width_100"
            v-model="queryParams.idNumber"
          />
        </el-form-item>
        <el-form-item label="缴费项目" prop="subjectId">
          <el-select v-model="queryParams.subjectId" placeholder="请选择缴费项目">
            <el-option
              v-for="(item, index) in payPrepaymentQueryAllPrepaymentData"
              :key="index"
              :label="item.projectName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="收费方式" prop="prepaymentMethod">
          <el-select v-model="queryParams.prepaymentMethod" placeholder="请选择收费方式">
            <el-option label="现金" value="现金" />
            <el-option label="微信" value="微信" />
            <el-option label="支付宝" value="支付宝" />
            <el-option label="云闪付" value="云闪付" />
          </el-select>
        </el-form-item>
        <el-form-item label="支付方式" prop="paymentStatus">
          <el-select v-model="queryParams.paymentStatus" placeholder="请选择支付方式">
            <el-option label="未支付" value="10" />
            <el-option label="已支付" value="20" />
            <el-option label="部分支付" value="30" />
          </el-select>
        </el-form-item>
        <el-form-item label="归集状态" prop="collectionStatus">
          <el-select v-model="queryParams.collectionStatus" placeholder="请选择归集状态">
            <el-option label="未归集" value="10" />
            <el-option label="已归集" value="30" />
          </el-select>
        </el-form-item>
        <el-form-item label="缴费学年" prop="feeYearId">
          <el-select v-model="queryParams.feeYearId" placeholder="请选择缴费学年">
            <el-option
              v-for="(item, index) in getSchoolFeeYearListData"
              :key="index"
              :label="item.feeYear"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="支付时间">
          <el-date-picker
            v-model="date"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00', '23:59:59']"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
          >
            搜索
          </el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="box-card" style="margin-top: 10px">
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="buttonMethod(3)"
            >生成账单
          </el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-edit"
            size="mini"
            @click="handleExport()"
            v-hasPermi="['charge:schoolFeeStandardsProject:student_ysf:export']"
            >导出
          </el-button>
        </el-col>
        <right-toolbar
          :showSearch.sync="showSearch"
          @queryTable="getList"
        ></right-toolbar>
      </el-row>
    </el-card>
    <el-card class="table-card" style="margin-top: 10px">
      <el-table
        :data="dataList"
        @selection-change="handleSelectionChange"
        row-key="id"
        size="mini"
        stripe
        border
      >
        <el-table-column type="selection" width="55" align="center" fixed="left" />
        <el-table-column label="姓名" prop="studentName" fixed="left" />
        <el-table-column label="身份证号" prop="idNumber" width="140" fixed="left">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              :content="scope.row.idNumber"
              placement="bottom-start"
            >
              <div class="width_100 text-overflow">{{ scope.row.idNumber }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="学院" prop="collegeName" width="140" />
        <el-table-column label="专业" prop="majorName" width="140" />
        <el-table-column label="年级" prop="gradeName" width="140" />
        <el-table-column label="缴费学年" prop="feeYear" width="140" />
        <el-table-column label="预缴项目" prop="projectName" width="140" />
        <el-table-column label="收费方式" prop="prepaymentMethod" />
        <el-table-column label="收费金额（元）" width="120" prop="chargeAmount" />
        <el-table-column label="抵扣金额（元）" width="120" prop="deductionAmount" />
        <el-table-column label="支付状态">
          <template slot-scope="scope">
            <div v-if="scope.row.paymentStatus == '10'">未支付</div>
            <div v-if="scope.row.paymentStatus == '20'">已支付</div>
            <div v-if="scope.row.paymentStatus == '30'">部分支付</div>
          </template>
        </el-table-column>
        <el-table-column label="归集状态">
          <template slot-scope="scope">
            <div v-if="scope.row.collectionStatus == '10'">未归集</div>
            <div v-if="scope.row.collectionStatus == '30'">已归集</div>
          </template>
        </el-table-column>
        <el-table-column label="归集时间" width="180" prop="collectedTime" />
        <el-table-column label="操作人" prop="createBy"  width="140" />
        <el-table-column label="最近支付时间" width="180" prop="lastPaidTime" />
        <el-table-column label="账单完成时间" width="180" prop="finishTime" />
        <el-table-column label="创建时间" prop="createTime" width="180" />
        <el-table-column label="备注" prop="remark" width="140">
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              :content="scope.row.remark"
              placement="bottom-start"
            >
              <div class="width_100 text-overflow">{{ scope.row.remark }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120" fixed="right">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              v-if="scope.row.isCancel != 1 && scope.row.collectionStatus != '30'"
              @click="buttonMethod(1, scope.row)"
              v-hasPermi="['charge:schoolFeeStandardsProject:student_ysf:void']"
              >作废
            </el-button>
            <el-button
              size="mini"
              type="text"
              v-if="scope.row.isCancel == 1"
              @click="buttonMethod(2, scope.row)"
              v-hasPermi="['charge:schoolFeeStandardsProject:student_ysf:del']"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>
    <el-dialog :title="title" :visible.sync="status" width="70%">
      <el-form label-width="120px" label-position="right" size="small" class="formBox">
        <el-row class="mb_10">
          <el-col :span="12">
            <el-form-item label="身份证号：" class="is-required">
              <el-select
                v-model="queryForm.info"
                filterable
                remote
                reserve-keyword
                placeholder="请输入完整的身份证号后进行搜索"
                :remote-method="queryFormInput"
                @change="queryFormInputChange"
                class="width_100"
              >
                <el-option
                  v-for="item in studentInfoList"
                  :key="item.value"
                  :label="item.name + '-' + item.idNumber"
                  :value="item"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="姓名：" class="is-required">
              <el-input v-model="queryForm.studentName" :placeholder="'请输入姓名'" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收费学年：" class="is-required">
              <el-select
                v-model="queryForm.feeYearId"
                placeholder="请选择收费学年"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in getSchoolFeeYearListData"
                  :label="item.feeYear"
                  :value="item.id"
                  :key="index"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学院：" class="is-required">
              <el-select
                v-model="queryForm.collegeId"
                placeholder="请选择学院"
                style="width: 100%"
                @change="getCollegeModeListFun"
              >
                <el-option
                  v-for="(item, index) in getSchoolCollegeListData"
                  :label="item.collegeName"
                  :value="item.id"
                  :key="index"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="模式：" class="is-required">
              <el-select
                v-model="queryForm.modelId"
                placeholder="请选择模式"
                style="width: 100%"
                @change="getCollegeMajorListFun"
              >
                <el-option
                  v-for="(item, index) in getCollegeModeListData"
                  :label="item.modelName"
                  :value="item.id"
                  :key="index"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="专业名称：" class="is-required">
              <el-select
                v-model="queryForm.majorId"
                placeholder="请选择专业名称"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in getCollegeMajorListData"
                  :label="item.majorName"
                  :value="item.id"
                  :key="index"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学制：">
              <el-select
                v-model="queryForm.studyPeriod"
                placeholder="请选择学制"
                style="width: 100%"
              >
                <el-option label="6年" value="6" />
                <el-option label="5年" value="5" />
                <el-option label="4年" value="4" />
                <el-option label="3年" value="3" />
                <el-option label="2年" value="2" />
                <el-option label="1年" value="1" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年级：" class="is-required">
              <el-select
                v-model="queryForm.gradeId"
                placeholder="请选择年级"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in getSchoolGradeListData"
                  :label="item.grade"
                  :value="item.id"
                  :key="index"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="缴费项目：" class="is-required">
              <el-select
                v-model="queryForm.subjectId"
                placeholder="请选择缴费项目"
                style="width: 100%"
              >
                <el-option
                  v-for="(item, index) in payPrepaymentQueryAllPrepaymentData"
                  :key="index"
                  :label="item.projectName"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收费金额：" class="is-required">
              <el-input
                v-model="queryForm.chargeAmount"
                :placeholder="'请输入收费金额'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="收费方式：" class="is-required">
              <el-select
                v-model="queryForm.prepaymentMethod"
                placeholder="请选择收费方式"
                style="width: 100%"
              >
                <el-option label="现金" value="现金" />
                <el-option label="微信" value="微信" />
                <el-option label="支付宝" value="支付宝" />
                <el-option label="云闪付" value="云闪付" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="状态：" class="is-required">
              <el-radio-group v-model="queryForm.closeStatus">
                <el-radio label="1">启用</el-radio>
                <el-radio label="2">停用</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注：">
              <el-input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4 }"
                placeholder="请输入内容"
                v-model="queryForm.remark"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="buttonMethod(5)">取 消</el-button>
        <el-button type="primary" @click="buttonMethod(4)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getSchoolCollegeList,
  getCollegeModeList,
  getCollegeMajorList,
  getSchoolGradeList,
  getSchoolFeeYearList,
} from "@/api/educational";
import { queryByIdNumber } from "@/api/charge/student";
import {
  payStudentPrepaymentQueryAllTable,
  payPrepaymentQueryAllPrepayment,
  payStudentPrepaymentCancel,
  payStudentPrepaymentDelete,
  payStudentPrepaymentInsertOne,
} from "@/api/charge";

export default {
  name: "",
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        collegeId: null,
        modelId: null,
        majorId: null,
        gradeId: null,
        studentName: null,
        idNumber: null,
        subjectId: null,
        prepaymentMethod: null,
        paymentStatus: null,
        collectionStatus: null,
        feeYearId: null,
        lastPaidStartTime: null,
        lastPaidEndTime: null,
      },
      queryForm: {},
      dialogImageUrl: "",
      dialogVisible: false,
      showSearch: true,
      date: [],
      dataList: [],
      ids: [],
      total: 0,
      status: false,
      title: "",
      getSchoolCollegeListData: [],
      getCollegeModeListData: [],
      getCollegeMajorListData: [],
      getSchoolGradeListData: [],
      getSchoolFeeYearListData: [],
      payPrepaymentQueryAllPrepaymentData: [],
      studentInfoList: [],
    };
  },
  created() {
    this.getSchoolCollegeListFun();
    this.getSchoolGradeListFun();
    this.getSchoolFeeYearListFun();
    this.payPrepaymentQueryAllPrepaymentFun();
    this.getList();
  },
  methods: {
    // 获取列表数据
    getList() {
      var data = this.queryParams;
      if (this.date.length > 0) {
        data.lastPaidStartTime = this.date[0];
        data.lastPaidEndTime = this.date[1];
      }
      payStudentPrepaymentQueryAllTable(data).then((res) => {
        if (res.code == 200) {
          this.dataList = res.rows;
          this.total = res.total;
        }
      });
    },
    // 详情弹窗
    queryFormInput(options) {
      console.log(options);
      var that = this;
      // console.log(this.queryForm.idNumber);
      if (options.length == 18) {
        queryByIdNumber({
          idNumber: options,
        }).then((res) => {
          if (res.code == 200) {
            that.studentInfoList = res.data;
          }
        });
      }
    },
    // 查询条件输入框变化事件处理函数
    queryFormInputChange(options) {
      console.log(options);
      this.getCollegeModeListFun(options.collegeId, true);
      this.getCollegeMajorListFun(options.educationId, true);
      this.$set(this.queryForm, "studentName", options.name);
      this.$set(this.queryForm, "idNumber", options.idNumber);
      this.$set(this.queryForm, "feeYearId", options.feeYearId);
      this.$set(this.queryForm, "collegeId", options.collegeId);
      this.$set(this.queryForm, "modelId", options.educationId);
      this.$set(this.queryForm, "majorId", options.majorId);
      this.$set(this.queryForm, "studyPeriod", options.schoolSystem);
      this.$set(this.queryForm, "gradeId", options.gradeId);
    },
    /**
     * 按钮点击事件处理方法
     */
    buttonMethod(options, value) {
      // 作废
      if (options == 1) {
        this.$confirm("确定作废" + value.studentName + "的订单吗？", "作废", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            payStudentPrepaymentCancel({ id: value.id }).then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: res.msg,
                });
                this.getList();
              } else {
                this.$message({
                  type: "error",
                  message: res.msg,
                });
              }
            });
          })
          .catch(() => {});
      }
      // 删除操作
      else if (options == 2) {
        this.$confirm("确定删除" + value.studentName + "的订单吗？", "删除", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            payStudentPrepaymentDelete({ id: value.id }).then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: res.msg,
                });
                this.getList();
              } else {
                this.$message({
                  type: "error",
                  message: res.msg,
                });
              }
            });
          })
          .catch(() => {});
      }
      // 添加
      else if (options == 3) {
        this.queryForm = {};
        this.status = true;
        this.title = "生成账单";
        this.studentInfoList = [];
        this.getCollegeModeListData = [];
        this.getCollegeMajorListData = [];
      }
      // 添加接口调用
      else if (options == 4) {
        var data = this.queryForm;
        if (!data.idNumber) {
          return this.$message.error("身份证号不能为空");
        }
        if (!data.studentName) {
          return this.$message.error("学生姓名不能为空");
        }
        if (!data.feeYearId) {
          return this.$message.error("收费学年不能为空");
        }
        if (!data.collegeId) {
          return this.$message.error("学院不能为空");
        }
        if (!data.modelId) {
          return this.$message.error("模式不能为空");
        }
        if (!data.majorId) {
          return this.$message.error("专业不能为空");
        }
        if (!data.studyPeriod) {
          return this.$message.error("学制不能为空");
        }
        if (!data.gradeId) {
          return this.$message.error("年级不能为空");
        }
        if (!data.gradeId) {
          return this.$message.error("年级不能为空");
        }
        if (!data.subjectId) {
          return this.$message.error("预缴项目不能为空");
        }
        if (!data.chargeAmount) {
          return this.$message.error("金额不能为空");
        }
        data.deductionAmount = data.chargeAmount;
        if (!data.prepaymentMethod) {
          return this.$message.error("收费方式不能为空");
        }
        if (!data.closeStatus) {
          return this.$message.error("是否启用不能为空");
        }
        payStudentPrepaymentInsertOne(data).then((res) => {
          if (res.code == 200) {
            this.$message.success(res.msg);
            this.resetQuery();
            this.status = false;
          } else {
            that.$message.error(res.msg);
          }
        });
      }
      // 关闭
      else if (options == 5) {
        this.queryForm = {};
        this.status = false;
        this.title = "";
      }
    },
    /**
     * 获取学院列表的函数
     */
    getSchoolCollegeListFun() {
      getSchoolCollegeList().then((res) => {
        if (res.code == 200) {
          this.getSchoolCollegeListData = res.data;
        }
      });
    },
    /**
     * 获取学院模式列表 @param {number} options - 学院ID
     */
    getCollegeModeListFun(options) {
      this.$set(this.queryParams, "modelId", "");
      this.$set(this.queryForm, "modelId", "");
      this.$set(this.queryParams, "majorId", "");
      this.$set(this.queryForm, "majorId", "");
      this.getCollegeModeListData = [];
      getCollegeModeList({
        collegeId: options,
      }).then((res) => {
        if (res.code == 200) {
          this.getCollegeModeListData = res.data;
        }
      });
    },
    /**
     * 获取学校专业列表的函数 @returns 无返回值
     */
    getCollegeMajorListFun(options) {
      this.$set(this.queryParams, "majorId", "");
      this.$set(this.queryForm, "majorId", "");
      this.getCollegeMajorListData = [];
      getCollegeMajorList({ modelId: options }).then((res) => {
        if (res.code == 200) {
          this.getCollegeMajorListData = res.data;
        }
      });
    },
    /**
     * 获取年级 @returns 无返回值
     */
    getSchoolGradeListFun() {
      getSchoolGradeList().then((res) => {
        if (res.code == 200) {
          this.getSchoolGradeListData = res.data;
        }
      });
    },
    /**
     * 获取学校费用年份列表 @returns 无返回值
     */
    getSchoolFeeYearListFun() {
      getSchoolFeeYearList().then((res) => {
        if (res.code == 200) {
          this.getSchoolFeeYearListData = res.data;
        }
      });
    },
    payPrepaymentQueryAllPrepaymentFun() {
      payPrepaymentQueryAllPrepayment().then((res) => {
        if (res.code == 200) {
          this.payPrepaymentQueryAllPrepaymentData = res.data;
        }
      });
    },
    /**
     * 处理查询请求 将查询参数中的页码重置为1，并调用getList方法获取列表数据
     */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /**
     * 重置查询表单并重新执行查询操作
     */
    resetQuery() {
      this.date = [];
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        collegeId: null,
        modelId: null,
        majorId: null,
        gradeId: null,
        studentName: null,
        idNumber: null,
        subjectId: null,
        prepaymentMethod: null,
        paymentStatus: null,
        collectionStatus: null,
        feeYearId: null,
        lastPaidStartTime: null,
        lastPaidEndTime: null,
      };

      this.resetForm("queryForm");
      this.handleQuery();
    },
    handleExport() {
      var data = this.queryParams;
      if (this.date.length > 0) {
        data.lastPaidStartTime = this.date[0];
        data.lastPaidEndTime = this.date[1];
      }
      this.download(
        "/order/payStudentPrepayment/export",
        {
          ...data,
        },
        `预缴管理导出.xlsx`
      );
    },
    /**
     * 处理选择项变化事件
     *
     * @param options 选择项数组
     */
    handleSelectionChange() {
      this.ids = options.map((item) => item.id);
    },
  },
};
</script>
